<template>
<div class="UpdateInfo" :data-app="true">
  <Snackbars :text="text" :value="isNotice" />
  <v-btn block :color="'#fff'" id="updateBtn" @click="openDialog">
    <span>修改个人资料</span>
    <v-icon>
      mdi-pencil
    </v-icon>
  </v-btn>
  <v-dialog
      :hide-overlay="true"
      :fullscreen="true"
      transition="dialog-bottom-transition"
      max-width="600"
      v-model="isDialog"
  >
    <template v-slot:default="dialog">
      <v-card>
        <v-toolbar
            dark
            color="primary"
        >
          <v-btn
              icon
              dark
              @click="closeDialog"
          >
            <v-icon>mdi-close</v-icon>
          </v-btn>
          <v-toolbar-title>修改个人资料</v-toolbar-title>
        </v-toolbar>
        <v-card-text>
          <!--更改昵称-->
          <div class="alterPart">
            <div class="alterTitle"><v-icon dark>mdi-account</v-icon>更改昵称</div>
            <v-text-field label="新昵称" :rules="rulesNickName" v-model="newName" />
            <v-btn
                class="Btns"
                outlined
                color="indigo"
                @click="alterName"
            >
              确认修改昵称
            </v-btn>
          </div>
          <!--更改密码-->
          <div class="alterPart">
            <div class="alterTitle"
            ><v-icon dark>mdi-lock</v-icon>更改密码</div>
            <v-text-field
                label="原密码"
                type="password"
                :rules="rulesPwd"
                v-model="oldPwd"
            />
            <v-text-field
                label="新密码"
                type="password"
                :rules="rulesPwd"
                v-model="newPwd"
            />
            <v-btn
                class="Btns"
                outlined
                color="indigo"
                @click="alterPwd"
            >
              确认修改密码
            </v-btn>
          </div>
          <!--更改头像-->
          <div class="alterPart">
            <div class="alterTitle"
            ><v-icon dark>mdi-cloud-upload</v-icon>更改头像</div>
            <v-file-input
                accept="image/*"
                label="选择图片(小于2MB)"
                :rules="rulesAva"
                show-size
                @change="getImg"
            ></v-file-input>
            <v-btn
                class="Btns"
                outlined
                color="indigo"
                @click="uploadImg"
            >
              上传头像
            </v-btn>
          </div>
        </v-card-text>
      </v-card>
    </template>
  </v-dialog>
</div>
</template>

<script lang="ts">
import Vue from 'vue'
import Snackbars from "@/components/Snackbars";
import {userChgAva,userChgName,userChgPwd,userChgAvaAns,userChgPwdAns,userChgNmsAns} from "@/api/user";
interface IData {
  isDialog: boolean;
  newName: string;
  oldPwd: '',
  newPwd: '',
  imgFile: any,
  rulesNickName: Array<any>;
  rulesPwd: Array<any>;
  rulesAva: Array<any>;
  text: string;
  isNotice: boolean;
}
export default Vue.extend({
  name: "UpdateInfo",
  components: {
    Snackbars
  },
  data: (): IData => ({
    isDialog: false,
    newName: '',
    oldPwd: '',
    newPwd: '',
    imgFile: null,
    rulesNickName: [
      (value: string) => (value && value.length >= 2) || "最少2个字符"
    ],
    rulesPwd: [
      (value: string) =>
          (value &&
              /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,18}$/.test(value)) ||
          "密码必须在6-18为，并且包含字母与数字",
    ],
    rulesAva: [
      (value: any) => !value || value.size < 2000000 || '图片大小不能超过 2 MB!',
    ],
    text: '',
    isNotice: false
  }),
  methods: {
    openDialog(){
      this.isDialog = true
    },
    closeDialog(){
      this.isDialog = false
    },
    getImg(e: Event){
      this.imgFile = e
    },
    //修改头像
    uploadImg(){
      if(this.imgFile){
        const formDate = new FormData()
        formDate.append('uploadFile',this.imgFile)
        userChgAva(formDate)
            .then(res => {
              const {code,msg} = res as unknown as userChgAvaAns
              if(code === 200){
                this.$store.dispatch('user/getUserInfo')
              }
              this.isNotice = true
              this.text = msg
              setTimeout(() => {
                this.isNotice = false
                this.text = ''
              },2000)

            })
      }else{
        this.isNotice = true
        this.text = '请选择图像后再上传'
        setTimeout(() => {
          this.isNotice = false
          this.text = ''
        },2000)
      }
    },
    //修改用户名
    alterName(){
      if(this.newName){
        userChgName(this.newName)
            .then(res => {
              const {code,msg} = res as unknown as userChgNmsAns
              if(code === 200){
                this.$store.dispatch('user/getUserInfo')
              }
              this.newName = ''
              this.isNotice = true
              this.text = msg
              setTimeout(() => {
                this.isNotice = false
                this.text = ''
              },2000)
            })
      }else{
        this.isNotice = true
        this.text = '请输入新昵称后再修改'
        setTimeout(() => {
          this.isNotice = false
          this.text = ''
        },2000)
      }
    },
    //修改密码
    alterPwd(){
      if(this.oldPwd){
        if(this.newPwd){
          userChgPwd(this.oldPwd,this.newPwd)
              .then(res => {
                const {code,msg} = res as unknown as userChgPwdAns
                if(code === 200){
                  this.$store.dispatch('user/getUserInfo')
                }
                this.oldPwd = ''
                this.newPwd = ''
                this.isNotice = true
                this.text = msg
                setTimeout(() => {
                  this.isNotice = false
                  this.text = ''
                },2000)
              })
        }
      }else{
        this.isNotice = true
        this.text = '请输入密码信息后再修改'
        setTimeout(() => {
          this.isNotice = false
          this.text = ''
        },2000)
      }
    }
  }
})
</script>

<style lang="scss">
.UpdateInfo {
  margin: 1.5vh 0;
  .Btns {
    margin: 1.5vh 0;
  }
  .v-toolbar__extension {
    justify-content: space-between !important;
  }
  .alterPart {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    .alterTitle {
      margin-top: 2vh;
      padding: 1vw;
      border-radius: 5px;
      opacity: .7;
      background-color: #000000;
      color: #ffffff;
    }
  }
}
</style>